<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<link rel="stylesheet" type="text/css" href="styles/reset.css" />
	<link rel="stylesheet" type="text/css" href="styles/form.css" />
	<link rel="stylesheet" type="text/css" href="styles/toolbar.css" />
	<link rel="stylesheet" type="text/css" href="styles/general.css" />
	<link rel="stylesheet" type="text/css" href="styles/widget-box.css" />	
	<script type="text/javascript" src="scripts/jquery.min-1.5.1.js"></script>	
	<script type="text/javascript" src="scripts/s_code.js"></script>
	<script type="text/javascript" src="scripts/jquery.url.js"></script>
	<script type="text/javascript" src="scripts/jquery.site-builder.toolbar.js"></script>
	<script type="text/javascript" src="scripts/jquery.site-builder.js"></script>
	<script type="text/javascript" src="scripts/jquery.cookie.js"></script>
	<script type="text/javascript" src="scripts/fancybox/jquery.fancybox-1.3.4.js"></script>
	<script type="text/javascript" src="scripts/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
</head>
<body class="popup">
	<div class="ContentContainer">
	<div class="BodyContainer">
		<h1>Add Widget</h1>
		<div id="box-wrapper">	
			<div class="inner">
				<div id="box-content">					
					<div class="sidebar">
						<div class="section widget">
							<div class="widget-inner">
								<img class="widget-icon" src="images/wizard.png" />
								<div class="widget-content">
									<p><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipiscing elit. Donec volutpat ante ac risus consectetur vestibulum</p>
								</div>								
							</div>
							<a href="#" class="ribbon-link">								
									<span>Dolor sit amet, consectetur</span>
							</a>
						</div>
						<div class="section">
							<h2>Step 1 title is here</h2>
							<p class="description">Praesent sed justo odio, quis molestie orci. Suspendisse potenti. Phasellus at elementum lacus. In hac habitasse platea dictumst. Sed sit amet odio erat, sit amet iaculis quam. Praesent sagittis, arcu sit amet lacinia imperdiet, eros purus cursus mi, nec convallis est metus sit amet risus. Phasellus fermentum varius sollicitudin</p>
							<p class="description">Praesent sed justo odi platea dictumst. Sed sit amet odio erat, sit amet iaculis quam. Praesent sagittis, arcu sit amet lacinia imperdiet, eros purus cursus mi, nec convallis est metus sit amet risus. Phasellus fermentum varius sollicitudin</p>
							<p class="description">Praesent sagittis, arcu sit amet lacinia imperdiet, eros purus cursus. Phasellus fermentum varius sollicitudin</p>
						</div>
					</div>
					<div class="main-content">
						<div class="section">
							<ul class="steps">
								<li class="current">
									<span>1</span>
									<div class="description">Step 1 title... </div>
								</li>
								<li>	
									<span>2</span>
									<div class="description">Step 2 title... </div>
								</li>
								<li>
									<span>3</span>
									<div class="description">Step 3 title... </div>
								</li>								
								<li>
									<span class="step-circle">&nbsp;</span>
									<div class="description">You are done !</div>
								</li>
							</ul>
							
						</div>
						<div class="section">
							<div class="step-number">Step <br/> <span>2</span></div>
							<div class="form wide">
								<div class="row">
									<h2>Step 2 title go here</h2>
								</div>
								<div class="row">
									<label>Field name 1:</label>
									<div class="textbox">
										<span>
											<input type="text" style="width:137px" value="">
										</span>
									</div>
								</div>
								<div class="row">
									<label>A field:</label>
									<div class="textbox">
										<span>
											<input type="text" style="width:137px" value="">
										</span>
									</div>
								</div>
								<div class="row">									
									<label><span class="required">*</span>That is required:</label>
									<div class="textbox">
										<span>
											<input type="text" value="">
										</span>
									</div>
									<div class="errorMessage">quis molestie orci. Suspendisse potenti. Phasellus at elementum</div>
								</div>
								<div class="row">									
									<label>Website:</label>
									<div class="textbox">
										<span>
											<input type="text" value="">
										</span>
									</div>
								</div>
								<div class="row">									
									<label><span class="required">*</span>Field name:</label>
									<select>
										<option>Praesent eros diam</option>
										<option>Mattis vitae molestie</option>
										<option>Vivamus sed blandit turpis</option>
										<option>Praesent eros diam</option>
										<option>Mattis vitae molestie</option>
										<option>Vivamus sed blandit turpis</option>
									</select>
								</div>
								<div class="row buttons">
									<input type="submit" value="Save >">
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	</div>				
</body>
</html>